<template>
  <yd-ls-layout title="消息列表" :onfoot=false  :tolfurl="urls">

    <div class="yd-ls-height"></div>
    <yd-list theme="4" class="yd-ls-systemmsg-list">
      <yd-list-item v-for="(items,index) in systemList"
                    :key="index"
                    class="yd-ls-systemmsg-list-item"
                    @click.native="systemDetail(items.id)">
          <span slot="title">
            <span  style="position:relative">
              {{ items.title }}
              <i class="yd-tabbar-dot" v-if="items.unread"></i>
            </span>
            <span v-text="items.createtime"></span>
          </span>
        <yd-list-other slot="other">
          <div v-html="items.content"></div>
        </yd-list-other>
      </yd-list-item>
    </yd-list>

    <yd-ls-more @click.native="loadmore()" v-if="systemList.length != total"></yd-ls-more>
  </yd-ls-layout>
</template>

<style>
  .yd-ls-systemmsg-list.yd-list .yd-list-item .yd-list-title span span{
    font-size: .3rem;
    font-weight: normal;
  }
  .yd-ls-systemmsg-list.yd-list .yd-list-item .yd-list-title span span:last-child{
    float: right;
    font-size: 12px;
    color: #919191;
    font-weight: normal;
  }
  .yd-ls-systemmsg-list.yd-list .yd-list-item .yd-list-other div{
    width: 4rem;
    font-size: 0.24rem;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
  }
  .yd-ls-systemmsg-list-item .yd-list-img {
    display: none;
  }

</style>
<script>
  import ydLsLayout from '../../../components/yd-ls-layout.vue'
  import ydLsMore from '../../../components/yd-ls-more.vue'
  import api from '../../../axios/api'

  export default {
    name: 'systemmsg',
    props: {},
    data() {
      return {
        urls: 'index.html#/home',
        systemList: [],
        pageIndex: 1,
        pageSize: 10,
        total: 0
      }
    },
    created() {
      //TODO: 初始化数据
      this.pageIndex = 1
      let psize = this.$route.query.pagesize
      if(psize) this.pageSize = psize
      this.getMsgList()
    },
    methods: {
      init() {
      },
      systemDetail(id) {
        this.$router.push({ path: 'systemmsgdetail', query: { msgid: id, pageindex: this.pageIndex, pagesize: this.pageSize }})
      },
      getMsgList(type) {
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.get(api.system_list,{
          params: {
            pageindex: this.pageIndex,
            pagesize: this.pageSize
          }
        }).then(m=>{
          let system_data = m.data
          this.$dialog.loading.close()
          this.total = system_data.pageinfo.total
          if(type === 'load'){
            this.systemList = this.systemList.concat(system_data.data)
            return
          }
          this.systemList = system_data.data
        }).catch(err=>{
          this.$dialog.loading.close()
          this.$dialog.alert({mes: JSON.stringify(err)})
        })
      },
      loadmore() {
        this.pageIndex = this.pageIndex+1
        this.getMsgList('load')
      }
    },
    mounted() {
      this.init()
    },
    components: { ydLsLayout, ydLsMore }


  }
</script>
